<!-- <template>

    <view class="HomeTop">
        <view class="HomeContent" v-for="item in list" :key="item.id">

            <template v-if="router!=='pages/Home/Home'">
                <view :class="item.id == store.zid ? 'active':'HomeContents'">
                    {{item.title}}
                </view>
            </template>
            <template v-else>
                <view :class="item.id == store.zid ? 'active':'HomeContents'" @click="actives(item.id)">
                    {{item.title}}
                </view>
            </template>
        </view>
        <view class="Icon">
            <u-icon name="search" size="25" bold color="#0079fe"></u-icon>
            <view class="fonticon">
                <u-icon name='setting-fill' size="25" bold v-if="router!=='pages/Home/Home'" color="#0079fe"></u-icon>
            </view>
        </view>
    </view>
</template>

<script setup>
    import {
        defineProps
    } from 'vue'
    import {
        useAlertsStore
    } from '../../store/index.js'
    let store = useAlertsStore()
    let props = defineProps(['list', "router"])
    //高亮
    const actives = (id) => {
        store.active(id)
    }
</script>

<style scoped lang="scss">
    .HomeTop {
        display: flex;
        height: 140rpx;
        // background-color: blue;
        align-items: center;
        justify-content: space-between;

        .HomeContents {
            padding: 10rpx;
        }

        .Icon {
            display: flex;

            .fonticon {
                margin-left: 20rpx;
            }
        }
    }

    .active {
        padding: 10rpx;
        border-bottom: 4rpx solid #0079fe;
    }
</style> -->